<template>
  <div class="mybox">
    <div class="top_box">
      <div class="item_box">
        <div class="left_box"></div>
        <div class="right_box right">
          <div class="bg"></div>
          <div class="box_title">{{ onebox.field_name }}</div>
          <div class="value">
            <div class="box_value">{{ onebox.field_value }}</div>
            <div class="box_unit">{{ onebox.field_unit }}</div>
          </div>
        </div>
      </div>
      <div class="item_box">
        <div class="left_box bg1"></div>
        <div class="right_box right">
          <div class="bg"></div>
          <div class="box_title">{{ twobox.field_name }}</div>
          <div class="value">
            <div class="box_value">{{ twobox.field_value }}</div>
            <div class="box_unit">{{ twobox.field_unit }}</div>
          </div>
        </div>
      </div>
      <div class="item_box">
        <div class="left_box bg2"></div>
        <div class="right_box right">
          <div class="bg"></div>
          <div class="box_title">{{ threebox.field_name }}</div>
          <div class="value">
            <div class="box_value">{{ threebox.field_value }}</div>
            <div class="box_unit">{{ threebox.field_unit }}</div>
          </div>
        </div>
      </div>
      <div class="item_box">
        <div class="left_box bg3"></div>
        <div class="right_box right">
          <div class="bg"></div>
          <div class="box_title">{{ fourbox.field_name }}</div>
          <div class="value">
            <div class="box_value">{{ fourbox.field_value }}</div>
            <div class="box_unit">{{ fourbox.field_unit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="top_title">城管各类型事件情况</div>
    <row1chart />
  </div>
</template>
<script>
import row1chart from './row1chart'
import { getAction, postAction } from '@/api/manage'
export default {
  name: '',
  data () {
    return {
      onebox: {},
      twobox: {},
      threebox: {},
      fourbox: {}
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      postAction('/topic/data/listAllData/dy_dp_csgl_cgsj_gk', {}).then(res => {
        if (res.success) {
          this.onebox = res.result.data[0]
          this.twobox = res.result.data[1]
          this.threebox = res.result.data[2]
          this.fourbox = res.result.data[3]
        }
      })
    }
  },
  components: {
    row1chart
  }
}
</script>
<style lang="scss" scoped>
.mybox {
  .top_box {
    height: 200px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 20px;

    .item_box {
      display: flex;
      width: 200px;

      .left_box {
        margin-top: 10px;
        width: 49px;
        height: 46px;
        background: url('./img/1.png');
      }

      .bg1 {
        background: url('./img/2.png');
      }

      .bg2 {
        background: url('./img/3.png');
      }

      .bg3 {
        background: url('./img/4.png');
      }

      .right_box {
        position: relative;
        margin-left: 5px;

        .box_title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
        }

        .box_value {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 22px;
          color: #FFDE00;
        }

        .box_unit {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #AEEDEC;
        }

        // .bg {
        //   position: absolute;
        //   top: 10px;
        //   left: -10px;
        //   width: 121px;
        //   height: 13px;
        //   background: url('../left/img/5.png');
        // }

        .value {
          display: flex;
          padding-top: 5px;

          .box_unit {
            margin-top: 10px;
            margin-left: 5px;
          }
        }
      }

      .right {
        margin-top: 5px;
      }

    }
  }

  .top_title {
    width: 418px;
    height: 30px;
    background: url('../left/img/6.png');
    font-family: Microsoft YaHei UI;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 30px;
    padding-left: 14px;
  }


}
</style>
